@use "sass:string";
@use "sass:list";
@use "sass:math";
@import "./function.scss";
// extend
@each $value in $display {
    $prop:display;
    .el-#{$prop}-#{$value} {
        display: $value;
    }
}
@each $value in $flex-layout {
    $prop-hor:justify-content;
    $prop-ver:align-items;
    $prop-hor-sel:propSlice($prop-hor,1,1) + propSlice($prop-hor,-7,-7);
    $prop-ver-sel:propSlice($prop-ver,1,1) + propSlice($prop-ver,-5,-5);
    .el-#{$prop-hor-sel}-#{$value} {
        #{$prop-hor}: $value;
    }
    .el-#{$prop-ver-sel}-#{$value} {
        #{$prop-ver}: $value;
    }
}
@each $value in $flex-direction {
    $prop:flex-direction;
    $prop-sel:propSlice($prop,1,1) + propSlice($prop,6,6);
    .el-#{$prop-sel}-#{$value} {
        #{$prop}: $value;
    }
}
@each $value in $flex-direction {
    $prop:flex-direction;
    $prop-sel:propSlice($prop,1,1) + propSlice($prop,6,6);
    .el-#{$prop-sel}-#{$value} {
        #{$prop}: $value;
    }
}
@each $value in $text-align {
    $prop:text-align;
    $prop-sel:propSlice($prop,1,4);
    .el-#{$prop-sel}-#{$value} {
        #{$prop}: $value;
    }
}
@each $value in $position {
    $prop:position;
    $prop-sel:propSlice($prop,1,3) + '-' + propSlice($value,1,1);
    .el-#{$prop-sel} {
        #{$prop}: $value;
    }
}
@each $value in $font-weight {
    .fw-#{$value} {
        font-weight: $value;
    }
}
@each $value in $border-style {
    .bd-#{$value} {
        border-style: $value;
    }
    @each $dir in $direction {
        $sel:propSlice($dir,1,1);
        .bd#{$sel}-#{$value} {
            border-#{$dir}-style:$value;
        }
    }
}
@each $value in $cursor {
    .el-cursor-#{$value} {
        cursor: $value;
    }
}
@each $value in $bg-size {
    .bg-#{$value} {
        background-size: $value;
    }
}
@each $value in $overflow {
    .over-#{$value} {
        overflow: $value;
    }
    .over-x-#{$value} {
        overflow-x: $value;
    }
    .over-y-#{$value} {
        overflow-y: $value;
    }
}
@each $value in $box-sizing {
    .box-#{$value} {
        box-sizing: $value;
    }
}
@each $value in $flex-wrap {
    .flex-#{$value} {
        flex-wrap: $value;
    }
}
@each $value in $object-fit {
    .obj-fit-#{$value} {
        object-fit: $value;
    }
}

.flex-center {
    @extend .el-display-flex,.el-jc-center,.el-ai-center;
}
.link-text-none {
    text-decoration: list.nth($display,4);
}
.bg-transparent {
    background-color: $transparent;
}
.color-white {
    color:$white;
}
.color-transparent {
    color:$transparent;
}
.color-black {
    color:$black;
}
// mixin
$propList:line-height,width,height,font-size,right,top,bottom,left,margin,padding,border-width,border-radius,max-width,min-height;
@mixin setComponent($prop,$number:0,$unit) {
    $list:loopAppend($propList,1,5,margin-,$direction);
    $newProp:width;
    // @warn $prop;
    @if list.nth($list,list.index($list,$prop)) {
        $newProp:list.nth($list,list.index($list,$prop));
    }
    $value:$number;
    @if $unit {
        $value:$number + $unit;
    }
    #{$newProp}: $value;
}
@mixin setComponentPercent($prop,$number:0) {
    $list:loopAppend($propList,1,5,margin-,$direction);
    $newProp:width;
    @if list.nth($list,list.index($list,$prop)) {
        $newProp:list.nth($list,list.index($list,$prop));
    }
    $value:0;
    @if $number > 100 {
        $value:100;
    }@else if $number < -100 {
        $value:-100;
    }@else {
        $value:$number;
    }
    #{$newProp}: percentage(math.div($value,100));
}
@mixin background($color:#fff){
    background: $color;
}